window.addEventListener("load", function () {
  let audio_state = false;
  let audio = document.querySelector(".audio");
  audio.volume = 0.10;
  let tl = gsap.timeline();

  tl.to(".p1", {
    y: 0,
    opacity: 1,
    duration: 1,
  })
    .to(".p2", {
      y: 0,
      opacity: 1,
      duration: 1,
    })
    .to([".line", ".p3"], {
      y: 0,
      opacity: 1,
      duration: 1,
    })
    .to(".SocialMedia > li", {
      y: 0,
      opacity: 1,
      duration: 0.3,
      stagger: 0.2,
    })
    .to([".audioPlay", "changpian"], {
      x: 0,

      opacity: 1,
      duration: 1,
      onComplete: function () {
        let audioPlay = gsap.timeline();
        audioPlay.to(".changpian", {
          rotation: 360,
          repeat: -1,
          duration: 3,
          ease: "none",
        });
        audioPlay.pause();
        let playButtons = document.querySelectorAll(".playButton");
        for (let index = 0; index < playButtons.length; index++) {
          playButtons[index].addEventListener("click", function () {
            audio_state = !audio_state;
            if (audio_state) {
              gsap.to(".changgan", {
                rotation: 30,
                onComplete: function () {
                  audioPlay.resume();
                  audio.play();
                  document.querySelector("#tip").style.display = "none";
                },
              });
            } else {
              gsap.to(".changgan", {
                rotation: 90,
                onComplete: function () {
                  audioPlay.pause();
                  audio.pause();
                },
              });
            }
          });
        }
      },
    })
    .to(".audioControl", {
      opacity: 1,
      duration: 2,
    });

  /* 全局 */
  let cards = gsap.utils.toArray(".card-box");
  let practices = gsap.utils.toArray(".practices-block .item");
  cards.forEach((card) => {
    gsap.to(card, {
      y: 0,
      opacity: 1,
      duration: 1,
      scrollTrigger: {
        trigger: card,
        start: "top 100%",
      },
    });
  });
  practices.forEach((item) => {
    gsap.to(item, {
      y: 0,
      opacity: 1,
      duration: 1,
      scrollTrigger: {
        trigger: item,
        start: "top 100%",
      },
    });
  });
});
